import {getLogs} from '@siteed/react-native-logger';
import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  Button,
  FlatList,
  ListRenderItemInfo,
  StyleSheet,
  ToastAndroid,
  DeviceEventEmitter,
} from 'react-native';
import {uploadLoggers} from '../http/api.ts';
import DeviceInfo from 'react-native-device-info';

const LogScreen = () => {
  const [logs, setLogs] = useState(getLogs());
  console.log('Logs:', logs);
  const handleSendLogs = async () => {
    uploadLoggers(() => {
      ToastAndroid.show('日志已发送', ToastAndroid.SHORT);
    });
  };

  useEffect(() => {
    setLogs(getLogs()); // Refresh logs when component mounts
  }, []);
  const styles = getStyles();
  const renderItem = ({item}: ListRenderItemInfo<(typeof logs)[0]>) => (
    <View style={styles.logEntry}>
      <View>
        <Text style={styles.timestamp}>
          {new Date(item.timestamp).toLocaleTimeString()}
        </Text>
        <Text style={styles.context}>{item.namespace}</Text>
      </View>
      <Text style={styles.message}>{item.message}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={{fontSize: 30, fontWeight: 'bold', margin: 20}}>
        日志列表:{' '}
        {DeviceInfo.getModel() +
          ',' +
          DeviceInfo.getBrand() +
          ',' +
          DeviceInfo.getManufacturerSync()}
      </Text>
      <FlatList
        data={logs}
        renderItem={renderItem}
        keyExtractor={(item, index) => `${index}-${item.timestamp}`}
        style={styles.viewer}
        onScroll={() => DeviceEventEmitter.emit('userInteraction')}
        initialNumToRender={20} // Adjust based on performance requirements
      />
      <Button
        title="Send Logs to Support"
        onPress={handleSendLogs}
        style={{marginBottom: 50}}
      />
    </View>
  );
};
const getStyles = () =>
  StyleSheet.create({
    container: {
      flex: 1,
      width: '100%',
      padding: 5,
      marginBottom: 50,
    },
    viewer: {
      flex: 1,
      borderWidth: 1,
      marginBottom: 10,
    },
    controlsContainer: {
      flexShrink: 0,
    },
    buttonsContainer: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      marginBottom: 10,
    },
    pickerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 10,
      zIndex: 10,
    },
    pickerLabel: {
      marginRight: 10,
    },
    picker: {
      height: 50,
      flex: 1,
    },
    maxLogsContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 10,
      gap: 5,
    },
    maxLogsInput: {
      height: 40,
      borderColor: 'gray',
      borderWidth: 1,
      flex: 1,
      marginLeft: 10,
      padding: 5,
    },
    logCount: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 10,
    },
    context: {fontSize: 10, fontWeight: 'bold'},
    logEntry: {},
    message: {fontSize: 10},
    timestamp: {color: 'grey', fontSize: 10},
  });
export default LogScreen;
